<template>
    <div class="box">
我是count组件{{count}}
<button @click="count++">点我+1</button>
    </div>
</template>

<script>
export default {
    //data 是一个函数，返回一个对象
    //vue中为什么要求data是一个函数，不能是一个对象
    //因为vue组件是一个对象，而对象是引用数据类型，如果data是一个对象，那么多个组件实例共享同一个data的内存地址，会导致数据改一个，全局受影响。
    //vue组件data是一个函数，函数返回一个对象，每次创建组件都会调用data()得到一个全新的对象内存地址，这样就避免了数据冲突的问题
        data() {
            return {
                count:99
            }
        },
        
    }
</script>

<style scoped>
/* scoped的作用：当前端css只对当前组件内的标签生效 */
/* 面试题：如何解决组件的样式冲突 */
/* 我们推荐给每个style加上scoped
原理：
1、vue会自动生成一个唯一的hash(哈希)值
2、自动将选择器变成交集选择器
3、因为hash是唯一的，最终交集选择器也是唯一的，所以解决了组件之间的冲突问题
 */
 /* [属性选择器] */
 /* .box类名选择 */
 /* 交集选择器 */

.box{
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>